<template>
	<base-page bgColor="#F8F8F8">
		<block slot="header">
			<cu-custom :isBack="true" :backSolt="backSolt" bgColor="bg-white">
				<!-- #ifdef MP-WEIXIN -->
				<block slot="backbox">
					<view class="flex-box">
						<view class="goBack-icon" @click="BackPage">
							<image :src="staticImgUrl + 'chat/gobackIcon.png'" mode=""></image>
						</view>
						<view class="sousuoIcon" @click="toSearchindex()">
							<image :src="staticImgUrl + 'sousuo-.png'" mode=""></image>
						</view>
					</view>
				</block>
				<!-- #endif -->
				<block slot="content">
					<view class="text-center text-black ">{{ topName }}</view>
				</block>
				<!-- #ifdef H5 -->
				<block slot="right">
					<view class="sousuoIcon" @click="toSearchindex()">
						<image :src="staticImgUrl + 'sousuo-.png'" mode=""></image>
					</view>
				</block>
				<!-- #endif -->
			</cu-custom>

			<view class="topSelectClassify">
				<view @click="tabSelect('')" class="classifyText"
					:class="[tabIndex == '' ? 'classIifyTextActive' : '']">综合排序</view>
				<view @click="tabSelect('sale_num')" class="classifyText"
					:class="[tabIndex == 'sale_num' ? 'classIifyTextActive' : '']">销量</view>
				<view @click="tabSelect('create_time')" class="classifyText"
					:class="[tabIndex == 'create_time' ? 'classIifyTextActive' : '']">上新时间</view>
				<view class="pricesort">
					<view @click="tabSelect('discount_price')" class="classifyText"
						:class="[tabIndex == 'discount_price' ? 'classIifyTextActive' : '']">价格</view>
					<view class="priceupdown">
						<image :src="staticImgUrl + 'pricenot.png'" mode="" v-if="tabIndex != 'discount_price'"></image>
						<image :src="staticImgUrl + 'ups.png'" mode=""
							v-if="priceSelect == 0 && tabIndex == 'discount_price'"></image>
						<image :src="staticImgUrl + 'downs.png'" mode=""
							v-if="priceSelect == 1 && tabIndex == 'discount_price'"></image>
					</view>
				</view>
			</view>
		</block>

		<block slot="center">
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" height="100%" :down="downOption" @down="downCallback"
				:up="upOption" @up="upCallback">
				<view class="itemInfo">
					<view class="blockItems" v-for="(item, index) in list" :key="index" @click="goodsItemBtn(item)">
						<view class="itemImg">
							<image :src="item.sku_image || staticImgUrl + 'home/load_img.png'" mode=""></image>
						</view>
						<view class="itemTitle">{{ item.sku_name }}</view>
						<view class="itemPs">
							<view>
								<text class="priceNumT">￥</text>
								<text class="priceNum" v-if="item.promotion_type==1">{{ item.discount_price }}</text>
								<text class="priceNum" v-else>{{ item.price }}</text>
								<text class="goods-market-price" v-if="item.promotion_type==1">{{ item.price }}</text>
							</view>
							<view class="saleText" v-if="item.sale_num > 50">已售{{ item.sale_num }}</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</block>
	</base-page>
</template>

<script>
	import $Axios from '@/common/js/request/http.js';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import MescrollMoreItemMixin from '@/components/mescroll-uni/mixins/mescroll-more-item.js';
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		name: 'classifyilist',
		data() {
			return {
				mescroll: null,
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: true, // 不自动加载
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
						tip: '~ 空空如也 ~' // 提示
					}
				},
				backSolt: false,
				tabIndex: '',
				priceSelect: 0,
				order: '',
				sorts: '',
				type: '',
				list: [],
				page: 0,
				topName: ''
			};
		},
		onLoad(e) {},
		onShow(e) {
			this.pagesLen = getCurrentPages().length;
			this.category_id = this.$Router.queryObj().category_id;
			this.category_level = this.$Router.queryObj().category_level;
			if (this.$Router.queryObj().category_id == 111) {
				this.topName = '美食';
			} else if (this.$Router.queryObj().category_id == 5) {
				this.topName = '小家电';
			} else if (this.$Router.queryObj().category_id == 196) {
				this.topName = '生鲜';
			} else if (this.$Router.queryObj().category_id == 6) {
				this.topName = '美妆';
			}
			// #ifdef MP-WEIXIN
			this.backSolt = true;
			// #endif
		},
		created() {},
		methods: {
			// 初始化
			mescrollInit(e) {
				this.mescroll = e;
			},
			/*下拉刷新的回调 */
			downCallback(e) {
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调 */
			upCallback(page) {
				this.getGoodssku(this.category_id, this.category_level, page.num, 10, this.order, this.sorts);
			},
			BackPage() {
				// 判断页面栈是否只有一个
				if (this.pagesLen == 1) {
					uni.reLaunch({
						url: '/pages/index/index'
					});
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			toSearchindex() {
				this.$Router.push({
					path: '/shopPages/searchindex/searchindex'
				});
			},
			tabSelect(type) {
				this.tabIndex = type;
				if (type == 'discount_price') {
					var priceSelect = this.priceSelect;
					if (priceSelect == 0) {
						this.priceSelect = 1;
						this.getGoodssku(this.category_id, this.category_level, 1, 10, type, 'asc');
						this.mescroll.setPageNum(1);
						this.order = type;
						this.sorts = 'asc';
						this.mescroll.scrollTo(0);
						return;
					} else {
						this.priceSelect = 0;
						this.getGoodssku(this.category_id, this.category_level, 1, 10, type, 'desc');
						this.mescroll.setPageNum(1);
						this.order = type;
						this.sorts = 'desc';
						this.mescroll.scrollTo(0);
						return;
					}
				}
				this.getGoodssku(this.category_id, this.category_level, 1, 10, type, '');
				this.page = 1;
				this.order = type;
				this.sorts = '';
				this.mescroll.setPageNum(1);
				this.mescroll.scrollTo(0);
			},
			getGoodssku(category_id, category_level, page, page_size, order, sort) {
				$Axios
					.post(`api/Goodssku/page`, {
						category_id: category_id,
						category_level: category_level,
						page: page,
						page_size: page_size,
						order: order,
						sort: sort
					})
					.then(res => {
						this.mescroll.endSuccess(res.list.length);
						if (res.list.length != 0) {
							if (page == 1) {
								this.page = 1;
								this.list = [];
								this.list = res.list;
							} else {
								this.list = this.list.concat(res.list);
								this.page = page;
							}
						}
					});
			},
			goodsItemBtn(val) {
				this.$Router.push({
					path: '/shopPages/goods/detail',
					query: {
						goods_id: val.sku_id,
						type: 1
					}
				});
			}
		},
		mounted() {}
	};
</script>

<style lang="scss" scoped>
	/deep/.mescroll-uni {
		height: 100% !important;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.sousuoIcon {
		width: 38rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}

	.topSelectClassify {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #f8f8f8;

		.classIifyTextActive {
			color: #fd3b5c !important;
		}

		.classifyText {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #87888e;
		}

		.priceupdown {
			width: 20rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}

		.pricesort {
			display: flex;
			align-items: center;
		}
	}

	.itemInfo {
		width: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;

		.blockItems {
			width: 332rpx;
			height: auto;
			background: #ffffff;
			border-radius: 8rpx;
			margin-left: 32rpx;
			margin-bottom: 20rpx;

			.itemImg {
				border-top-left-radius: 8rpx;
				border-top-right-radius: 8rpx;
				width: 332rpx;
				height: 332rpx;
			}

			.itemTitle {
				width: 90%;
				margin: 18rpx auto;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
			}

			.itemPs {
				width: 90%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;
			}

			.priceNumT {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ff2342;
			}

			.priceNum {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ff2342;
			}

			.saleText {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
	}

	.flex-box {
		display: flex;
		align-items: center;
	}

	.goBack-icon {
		width: 19rpx;
		height: 36rpx;
		margin-right: 40rpx;
	}

	.xszkstyle {
		border: 1rpx solid red;
		max-width: 120rpx;
		text-align: center;
		font-size: 18rpx;
		margin-left: 20rpx;
	}

	.goods-market-price {
		font-size: 20rpx;
		color: #999999;
		font-style: italic;
		text-decoration: line-through;
		padding-left: 20rpx;
	}
</style>
